<template>
  <div>
    <div class="box">
      <div class="top">
        <div class="person-info">
          <div class="flexCenter">
            <div style="position: relative">
              <input style="position:absolute;width:70px;height:70px;opacity:0;z-index: 10"
                     @change="selectImg($event.target)" accept="image/*" type="file" name="name" value=""/>
              <img :src="userinfos.Avatar" alt="">
            </div>
          </div>
          <div class="flexCenter">
            <span  v-if="statistics.GradeName">
              {{userinfos.NickName}}
            </span>
						 <span  v-else>
						  {{userinfos.Userphone}}
						</span>
            <span v-if="statistics.GradeName" class="level">
              {{statistics.GradeName}}
            </span>
          </div>
          <div class="flexCenter">
            我的积分：<span>{{statistics.AvailableIntegral}}</span>分
          </div>
        </div>
        <div class="placeholder"></div>
        <div class="four-data flexBetween">
          <div>
            <p style="color: #FF8A18">{{statistics.OnIntegral}}</p>
            <p>本月积分</p>
          </div>
          <div>
            <p style="color: #62ADE5">{{statistics.AggregateScore}}</p>
            <p>累计积分</p>
          </div>
          <div>
            <p style="color: #95C73B">{{statistics.UseIntegral}}</p>
            <p>已用积分</p>
          </div>
          <div>
            <p style="color: #E9423A">{{statistics.ChangeTheOrder}}</p>
            <p>兑换订单</p>
          </div>
        </div>
      </div>
      <div class="fun-con flexLeft">
        <div @click="goPage('/orderIndex')" style="border-right: 1px solid #E7EAED" class="fun-item flexColumn">
          <span style="color: #FD8A2E" class="iconfont icon-dingdan1"></span>
          <span style="color: #FD8A2E">订单</span>
        </div>
        <div @click="goPage('/integralIndex')" style="border-right: 1px solid #E7EAED" class="fun-item flexColumn">
          <span style="color: #99CC3D" class="iconfont icon-jifen1"></span>
          <span style="color: #99CC3D">积分</span>
        </div>
         <div @click="goPage('/addressIndex')" class="fun-item flexColumn">
          <span style="color: #19C594" class="iconfont icon-dingdan1"></span>
          <span style="color: #19C594">收货地址</span>
        </div>
      </div>

      <div class="fun-con flexLeft" style="border-top: 1px solid #E7EAED">
        <div @click="goPage('/setting')" style="border-right: 1px solid #E7EAED" class="fun-item flexColumn">
          <span style="color: #F8CB40" class="iconfont icon-zhanghaoguanli"></span>
          <span style="color: #F8CB40">账号设置</span>
        </div>

        <div @click="getCode" class="fun-item flexColumn" style="border-right: 1px solid #E7EAED">
          <span style="color: #9C89B9" class="iconfont icon-saoma2"></span>
          <span style="color: #9C89B9">扫码积分</span>
        </div>
      <div @click="shareBgShowHide" class="fun-item flexColumn">
          <span style="color: #62ADE5" class="iconfont icon-fenxiang"></span>
          <span style="color: #62ADE5">邀请注册</span>
        </div>
        <!--<div @click="getLocation" class="fun-item flexColumn">-->
          <!--<span style="color: #62ADE5" class="iconfont icon-fenxiang"></span>-->
          <!--<span style="color: #62ADE5">获取位置</span>-->
        <!--</div>-->
      </div>
    </div>
    <foot-guide></foot-guide>
    <div v-if="shareBg" @click="shareBgShowHide" class="shareBg">
      <img src="https://www.m12315.com/mall/img/share.png" alt="">
    </div>
  </div>
</template>

<script>
  import footGuide from 'src/components/footer/footGuide'
  import {getStore, setStore} from '../../config/mUtils'
  import {Toast, MessageBox} from 'mint-ui';
  import wx from 'weixin-js-sdk';

  export default {
    name: "my-index",
    data() {
      return {
        headTitle: '购物车',
        showLoading: true,
        hasItem: false,
        checkArr: [],
        userInfo: {},
        statistics: {},
        fwCode: '20960053750005101249',
        userAgent: '',
        shareBg: false,
        userinfos:{}
      }
    },
    components: {
      footGuide,
    },
    methods: {
      getLocation(){
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
            alert(accuracy)
          }
        });

      },
      shareBgShowHide() {
        this.shareBg = !this.shareBg;
      },
      goPage(url) {
        this.$router.push({
          path: url
        })
      },
      //上传图片
      selectImg(imgFile) {
        var instance = this.$axios.create({
          baseURL: 'http://alt.m12315.com/'
        })
        let param = new FormData();  // 创建form对象
        param.append('file', imgFile.files[0]);  // 通过append向form对象添加数据
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        instance.post("wscore/upload.file", param, config)
          .then((p) => {
            this.$axios.post('Integral.user.avatar.modify',
              {Id: this.userInfo.Id, Avatar: p.data}).then((res) => {
              if (res.data.status == '10001') {
                this.userInfo.Avatar = p.data;
                this.userinfos.Avatar = p.data;
                setStore('userInfo', this.userInfo);
                Toast({
                  message: '头像修改成功',
                  iconClass: 'iconfont icon-dui',
                  duration: 2000
                });
              }
            })
          })
      },
       //获取用户信息
      getuserinfo() {
      this.$axios
        .get("integral.user.getinfo", {
          params: {
            userid: this.userInfo.Id
          }
        })
        .then(p => {
          this.userinfos = p.data.result;
        });
      },
      //获取统计信息
      getStatistics() {
        this.$axios.get('the.integral.statistics', {
          params: {
            InuserId: this.userInfo.Id,
            eid: this.userInfo.EnterpriseId,
            UserType: this.userInfo.UserType
          }
        }).then((p) => {
          this.statistics = p.data.result;
        })
      },
      //判断是微信还是支付宝
      isAlipayOrWechat() {
        var Agent = navigator.userAgent.toLowerCase();
        if (Agent.match(/Alipay/i) == "alipay") {
          this.userAgent = 'alipay';
        } else if (Agent.match(/MicroMessenger/i) == "micromessenger") {
          this.userAgent = 'wechat';
        } else {
          this.userAgent = 'none';
        }
      },
      //扫码
      scanCode() {
        if (this.userAgent == 'alipay') {
          this.apScanQRCode();
        } else if (this.userAgent == 'wechat') {
          this.wxScanQRCode();
        } else {
          Toast({
            message: '扫码请前往微信或者支付宝',
            iconClass: 'iconfont icon-dui',
            duration: 2000
          });
        }
      },
      //微信配置
      getWXConfig() {
        this.$axios.get('integral.wx.setting', {params: {callback: window.location.href}}).then(Msg => {
          this.wxParams(Msg.data.result.AppId, Msg.data.result.Timestamp, Msg.data.result.RndStr, Msg.data.result.Signature);
        });
      },
      wxParams(appId, timestamp, nonceStr, signature) {
        wx.config({
          debug: false,
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature,// 必填，签名，见附录1
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'getLocation',
            'scanQRCode'// 微信扫一扫接口
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function (res) {
          console.log(res.errMsg);
        });
      },
      //微信扫码
      wxScanQRCode() {
        var that = this;
        wx.scanQRCode({
          needResult: 1,
          desc: 'scanQRCode desc',
          scanType: ["qrCode", "barCode"],
          success: function (res) {
            that.fwCode = res.resultStr.split('=')[1];
            that.getCode();
          },
          cancel: function (res) {
          }
        })
      },
      getCode() {
        if (this.fwCode.length < 18) {//输四位码
          MessageBox.prompt('输入后四位码').then(({value, action}) => {
            if (action=='confirm' && value) {
              this.$axios.post('integral.user.Receive', {
                fwCode: this.fwCode,
                inuserId: this.userInfo.Id,
                VerCode: value || ''
              }).then((p) => {
                if(p.data.result.Status=='1')
                {
                  Toast({
                    message: '+' + p.data.result.Integral + '积分',
                    iconClass: 'iconfont icon-dui',
                    duration: 2000
                  });
                  this.getStatistics();
                }
                else
                {
                  Toast({
                    message: p.data.result.msg,
                    iconClass: 'iconfont icon-cuowu',
                    duration: 2000
                  });
                }
              })
            }
          });
        } else {
          this.$axios.post('integral.user.Receive', {
            fwCode: this.fwCode,
            inuserId: this.userInfo.Id,
            VerCode:''
          }).then((p) => {
            if (p.data.result.Status == 1) {
              Toast({
                message: '+' + p.data.result.Integral + '积分',
                iconClass: 'iconfont icon-dui',
                duration: 2000
              });
              this.getStatistics();
            } else {
              Toast({
                message: p.data.result.msg,
                iconClass: 'iconfont icon-cuowu',
                duration: 2000
              });
            }
          })
        }
      },
      //支付宝扫码
      apScanQRCode() {
        ap.scan((res) => {
          ap.alert(res.code);
          ap.alert(res.error);
        });


      },

      //微信分享
      share() {
        let _this = this;
        wx.ready(function () {
          let shareData = {
            title: '积分商城',
            desc: '积分商城邀请注册链接',
            // link:'https://www.m12315.com/mall/#/register?iuid='+_this.userInfo.Id+'&eid='+_this.userInfo.EnterpriseId,
            link:'http://tx.m12315.com/mall/#/register?iuid='+_this.userInfo.Id+'&eid='+_this.userInfo.EnterpriseId,
            imgUrl:'https://www.m12315.com/mall/img/fenxiang.png'
          };
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareWeibo(shareData);
        })
      }
    },
    created() {
      this.userInfo = getStore('userInfo');
			console.log( this.userInfo)
      if (this.$route.query.code) {
        this.fwCode = this.$route.query.code;
        this.scanCode();
      } else {
        this.getStatistics(this.$route.query.code);
      }
    },
    mounted() {
      this.getWXConfig();
      this.share();
      this.getuserinfo();
    }
  }
</script>


<style lang="scss" scoped>
  .box {
    padding-bottom: 2.5rem;

    .top {
      position: relative;

      .person-info {
        background: #E9423A;
        padding: 2.13rem 0;

        img {
          width: 2.99rem;
          height: 2.99rem;
          border-radius: 100%;
        }

        .flexCenter {
          font-size: 0.60rem;
          color: white;

          span {
            color: white;
          }
        }
      }

      .four-data {
        height: 2.56rem;
        position: absolute;
        bottom: 0.85rem;
        width: 90%;
        margin-left: 5%;
        background: white;
        border-radius: 0.43rem;

        div {
          flex: 1;

          p:nth-child(1) {
            font-size: 0.60rem;
            text-align: center;
          }

          p:nth-child(2) {
            font-size: 0.51rem;
            text-align: center;
          }
        }
      }
    }

    .fun-con {
      background: white;

      .fun-item {
        flex: 1;
        height: 5rem;

        .iconfont {
          font-size: 1.71rem;
        }

        span:nth-child(2) {
          font-size: 0.60rem;
        }
      }
    }
  }

  .level {
    padding: 0.1rem 0.55rem;
    background: #FA9D28;
    font-size: 0.5rem;
    border-radius: 0.17rem;
    margin-left: 0.43rem;
  }

  .usertype {
    padding: 0.1rem 0.55rem;
    background: rgb(106, 4, 146);
    font-size: 0.5rem;
    border-radius: 0.17rem;
    margin-left: 0.43rem;
  }

  .shareBg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    text-align: right;

  }
</style>


<style>
  .mint-msgbox-input input {
    height: 1.54rem;
  }
</style>
